/**
 * This mixin create CSS variables with distinct HSL layers.
 */
@mixin colorHsl($color, $hue, $saturation, $lightness) {
  --#{$color}-h: #{$hue};
  --#{$color}-s: #{$saturation};
  --#{$color}-l: #{$lightness};
  --#{$color}: hsl(var(--#{$color}-h), var(--#{$color}-s), var(--#{$color}-l));
}
